<script setup>
import { ref, onMounted } from 'vue'
import { airspaceAppServer } from '@/api'
import * as echarts from 'echarts'
const navBar = ref('飞行活动架次')
const navList = ref(['飞行活动架次', '飞行活动时长'])
const optionData = {
  tooltip: {
    trigger: 'axis',
    borderColor: '#0F2638',
    backgroundColor: '#0F2638DB',
    textStyle: {
      color: '#fff',
      fontSize: 14,
      marginLeft: '-20px'
    },
    formatter: function (params) {
      return `<div>${params[0].name}<br/> ${params[0].data} ${navBar.value == '飞行活动架次' ? '架次' : '小时'}</div>`
    }
  },
  grid: {
    left: '2%',
    right: '2%',
    bottom: '2%',
    top: '15%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      // boundaryGap: false,
      // 插入数值
      data: ['政务巡检', '物流运输', '裁人通勤', '低空文旅', '融合飞行'],
      xlevel: 0,
      axisLabel: {
        textStyle: {
          color: 'rgba(255,255,255,0.7)',
          fontSize: 12
        },
        interval: 0
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, .5)'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    },
    {
      type: 'category',
      // 插入数值
      xlevel: 1,
      axisLabel: {
        show: false,
        textStyle: {
          color: 'rgba(255,255,255)',
          fontSize: 12
        },
        interval: 0
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: 'rgba(255, 255, 255, .5)'
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .2)'
        }
      }, //设置网格
      axisTick: {
        show: false
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: 'none',
      axisLine: 'none',
      splitNumber: 3,
      axisLabel: {
        textStyle: {
          color: '#85B9CB',
          fontSize: '12'
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, .2)'
        }
      } //设置网格
    }
  ],
  series: [
    {
      type: 'bar',
      xAxisIndex: 0,
      data: ['', '', '', '', ''],
      barWidth: 10,
      itemStyle: {
        normal: {
          borderColor: 'rgba(91, 226, 255, 1)',
          borderWidth: 1,
          color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(91, 226, 255, 0.3)'
            },
            {
              offset: 1,
              color: 'rgba(91, 226, 255, 1)'
            }
          ])
        }
      }
    },
    {
      name: '框',
      type: 'bar',
      xAxisIndex: 1,
      data: [40, 40, 40, 40, 40],
      barWidth: 16,
      itemStyle: {
        normal: {
          color: 'rgba(255,255,255,.2)'
        }
      }
    }
  ]
}
const option = ref(optionData)

const airspaceApp = async (flyType) => {
  const res = await airspaceAppServer()
  const flyCount = res.data.filter((item) => item.flyType == flyType).map((i) => i.flyCount)
  const max = Math.max(...flyCount)
  option.value.series[0].data = flyCount
  // option.value.yAxis[0].max = max
  option.value.series[1].data = new Array(flyCount.length).fill(max)
}

const changeNav = (item) => {
  navBar.value = item
  if (item === '飞行活动架次') {
    airspaceApp(1)
  } else {
    airspaceApp(2)
  }
}

onMounted(() => {
  airspaceApp(1)
})
</script>
<template>
  <div class="card">
    <CommonTitle title="应用场景" />
    <div class="conbox">
      <div class="navbox">
        <p
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: navBar === item }"
          @click="changeNav(item)"
        >
          {{ item }}
        </p>
      </div>
      <div class="chart">
        <Charts :option="option" container="15" />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  .conbox {
    padding: 2px 15px 10px;

    .navbox {
      display: flex;
      align-items: center;

      p {
        flex: 1;
        padding: 5px 0 10px;
        font-size: 15px;
        opacity: 0.7;
        text-align: center;
        cursor: pointer;
        background: left bottom url('@img/overview/navbar.png') no-repeat;
        background-size: 100% 3px;

        &.active {
          opacity: 1;
          position: relative;
          background: -10px 25px url('@img/overview/navbar_active.png') no-repeat;
          background-size: 120% 20px;

          &::before {
            position: absolute;
            top: 15px;
            left: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_left.png');
            background-size: 100% 100%;
          }

          &::after {
            position: absolute;
            top: 15px;
            right: 0;
            width: 7px;
            height: 7px;
            content: '';
            background: url('@img/overview/arrow_right.png');
            background-size: 100% 100%;
          }
        }
      }
    }

    .chart {
      width: 100%;
      height: 140px;
    }
  }
}
</style>
